<template>
  <footer id="footer">
    <ul class="father_box">
       <!-- 公司信息 -->
      <li class="company_info">
        <!-- <h4 class="li_title">联系信息</h4> -->
        <ul >
          <li>电话：952014</li>
          <!-- <li class="no_wrap">公司地址：惠州市惠城区帝景国际商务中心2座22层</li> -->
          <li class="no_wrap">邮箱：support@520xmbz.com</li>
        </ul>
      </li>
      
      <!-- 电商渠道 -->
      <li class="channel">
        <h4 class="li_title">
          ———————&nbsp;&nbsp;&nbsp;您可以从以下平台购买&nbsp;&nbsp;&nbsp;———————
        </h4>
        <div class="elf_map">
          <ul class="channel_row flex-row-sb-c">
            <li v-for="item in channelList1" :key="item" @click="alibaba(item)">
              <!-- <a :href="item.toTarget" target="_blank"> </a> -->
              <a href="javascrript:void(0)"> </a>
            </li>
          </ul>
          <ul class="channel_row flex-row-sb-c">
            <li v-for="item in channelList2" :key="item" @click="alibaba(item)">
              <!-- <a :href="item.toTarget" target="_blank"> </a> -->
              <a href="javascrript:void(0)"> </a>
            </li>
          </ul>
          <ul class="channel_row flex-row-sb-c">
            <li v-for="item in channelList3" :key="item" @click="alibaba(item)">
              <!-- <a :href="item.toTarget" target="_blank"> </a> -->
              <a href="javascrript:void(0)"> </a>
            </li>
          </ul>
        </div>
      </li>
      <!-- 订购时间 -->
      <li class="business_hours">
        <!-- <h4 class="li_title">订购时间</h4> -->
        <div>营业时间：24小时在线下单</div>
        <div>客服时间：8：00-23：00</div>
        <!-- <div>订购热线：952014</div> -->
      </li>
    </ul>
    <div class="horizontal_line"></div>
    <!-- 底部版权信息 -->
    <div class="copyright">
      <div>版权所有 © 2022 惠州市叮当熊猫烘焙有限公司</div>
      <div class="flex-row-c-c">
        <!-- <div class="license flex-row-c">
          <img src="@/assets/images/_first.png" />
          <span>电子营业执照</span>
        </div> -->
        <div class="record flex-row-c">
          <img src="@/assets/images/_second.png" />
          <a href="javascript:void(0)" @click="copyInfo"
            ><span id="copyText">粤ICP备18030870号-1</span></a
          >
        </div>
      </div>
    </div>
  </footer>
</template>

<script lang="ts">
import { ElNotification  } from 'element-plus'
export default {
  setup() {
    const channelList1 = ref([
      {
        toTarget: 'https://w.dianping.com/cube/evoke/meituan.html?url=imeituan%3A%2F%2Fwww.meituan.com%2Fmrn%3Fmrn_biz%3Dmeishi%26mrn_entry%3Dska-brand-profile%26mrn_component%3Dmain%26brandid%3D600847%26hallid%3D2017031%26source%3Dfenxiang%26mrn_backup_url%3Dimeituan%253A%252F%252Fwww.meituan.com%252Fpicassomodules%253Fpicassojs%253Dadp-ska-picasso%252Fhomepage_v3-vc%2526brandid%253D600847%2526hallid%253D2017031%2526source%253Dfenxiang&utm_source=appshare&utm_fromapp=more&utm_term=AandroidBgroupC11.20.404DEG202206091756530000000000000DA37249E24B54735A15809B063052FA4A162620201298565050949&utm_medium=androidweb&lch=appshare_15765ad81b16f589A6',
        name: '美团',
      },
      {
        toTarget: 'https://i.waimai.meituan.com/external/poi/1075113173753441?utm_source=5913&amp;wmi_from=cpoiinfo&amp;user_id=3360089687&utm_fromapp=more&utm_term=AandroidBgroupC11.20.404DEG202206091757210000000000000DA37249E24B54735A15809B063052FA4A162620201298565050662&utm_medium=androidweb&lch=appshare_185d41d4d4157704A6',
        name: '美团外卖',
      },
      {
        toTarget: 'https://j.youzan.com/4-z5P7',
        name: '有赞',
      },
      {
        toTarget: 'https://h5.ele.me/wakeup/?jumpUrl=eleme%3A%2F%2Fcatering%3Frestaurant_id%3DE17770475595705855380&_ltraffic_share=dingding',
        name: '饿了么',
      },
      {
        toTarget: 'https://m.dianping.com/shopshare/G1xiYlaKxFVLHMDo?msource=Appshare2021&utm_source=shop_share',
        name: '大众点评',
      },
      {
        toTarget: 'https://h5.ele.me/wakeup/?jumpUrl=eleme%3A%2F%2Fminiapp%3Furl%3Dhttps%253A%252F%252Fm.duanqu.com%253F_ariver_appid%253D2021002121619934%2526page%253Dcatering-life-store%25252Fpages%25252Findex%25252Findex%25253FstoreId%25253D414736404&_ltraffic_share=dingding',
        name: '口碑',
      },
    ])
    const channelList2 = ref([
      {
        toTarget: 'https://mobile.yangkeduo.com/mall_page.html?mall_id=609188630&ts=1654768316974&has_decoration=1&msn=6so5lraf5icxx4ajeyclhtjzz4_axbuy&refer_share_id=ee689489a02b4c918dd7f23c46175a28&refer_share_uin=CG33FEGBSQ7FYHBFYA4J3CPWWE_GEXDA&refer_share_channel=copy_link&refer_share_form=text',
        name: '拼多多',
      },
      {
        toTarget: 'http://thunder.jd.com/stores/#/?venderId=10269055&storeId=24496231&source=appSearch&lng=114.420573&lat=23.11359&_ts=1654768242316&utm_user=plusmember&ad_od=share&utm_source=androidapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL',
        name: '京东',
      },
      {
        toTarget: 'https://xiongmaobuzou.m.tmall.com/?ajson=1&parentCatId=0&weexShopTab=allitemsbar&weexShopSubTab=allitems&sourceType=other&suid=6c54bf59-8518-4ba1-aff4-5003963b17ba&shareUniqueId=16347920503&ut_sk=1.YOZ3e6%2FmL6wDADVxVN2i5CCS_21646297_1654767938300.DingTalk.shop&un=b0b4bc060d68255ed73404ef31e0dbe8&share_crt_v=1&un_site=0&sp_abtk=common_shop_commonInfo&cpp=1&shareurl=true&spm=a313p.22.s2wznqba.1397753046649&short_name=h.fvjbPPA&bxsign=scd0vmA59JKgpikdmPj0G1m7fgr9YaVrkUPRi5c9xpWKrNFmUwcAZyq7G3MjE2pLV2rg1-gfVi7nPW7QvN-gm38ZJ_XNefENJvb8A7DD-w_DMrdQlXnAwlK3vh5X-Ovb8kr&app=chrome',
        name: '天猫',
      },
      {
        toTarget: 'https://www.xiaohongshu.com/vendor/5d9ed818ebca00000187a073?naviHidden=yes&xhsshare=CopyLink&appuid=5d2364e70000000016006dca&apptime=1654768043',
        name: '小红书',
      },
      {
        toTarget: 'https://j.youzan.com/4-z5P7',
        name: '微信',
      },
      {
        toTarget: 'https://aweme.snssdk.com/falcon/poi_mwa/poi_detail?poi_id=6661783143860717576&u_code=151hbl02c&timestamp=1654768154&utm_source=copy&utm_campaign=client_share&utm_medium=android&app=aweme',
        name: '抖音',
      },
    ])
    const channelList3 = ref([
      {
        toTarget: 'javaScript:void(0)',
        name: '京东到家',
      },
      {
        toTarget: 'javaScript:void(0)',
        name: '东方福利网',
      },
      {
        toTarget: 'javaScript:void(0)',
        name: '微盟',
      },
      {
        toTarget: 'javaScript:void(0)',
        name: '熊猫优福',
      },
      {
        toTarget: 'javaScript:void(0)',
        name: '建行生活',
      },
      {
        toTarget: 'javaScript:void(0)',
        name: '中信银行',
      },
    ])
    const alibaba = (item) => {}
    const copyInfo = () => {
      const range = document.createRange()
      range.selectNode(document.getElementById('copyText'))
      const selection = window.getSelection()
      if (selection.rangeCount > 0) selection.removeAllRanges()
      selection.addRange(range)
      document.execCommand('copy')
      ElNotification ({
        type: 'success',
        message: '已复制',
        showClose: false,
        offset: 100
      })
      setTimeout(() => {
        window.open('https://beian.miit.gov.cn/#/Integrated/index')
      }, 800)
    }
    return {
      channelList1,
      channelList2,
      channelList3,
      alibaba,
      copyInfo,
    }
  },
}
</script>

<style lang="scss">
#footer {
  position: relative;
  height: 460px;
  color: #ffffff;
  padding: 63px 0 30px 0;
  background: url(@/assets/images/footer_bg.png) no-repeat;
  background-size: cover;
  .father_box {
    display: flex;
    justify-content: space-between;
    max-width: 74%;
    margin: 0 auto;
    .li_title {
      font: 500 20px 'PingFang SC';
      margin-bottom: 24px;
    }
    // 左侧
    .business_hours {
      div {
        font: 400 16px 'Microsoft YaHei';
        line-height: 26px;
      }
    }
    // 中间
    .channel {
      .elf_map {
        width: 360px;
        height: 182px;
        margin: 0 auto;
        background: url(@/assets/images/sprite_channel.png) no-repeat;
        background-size: contain;
        .channel_row {
          width: 360px;
          height: 50px;
          margin-bottom: 15px;
        }
        li {
          width: 50px;
          height: 50px;
          a {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            cursor: default;
          }
        }
      }
    }
    .company_info {
      width: 247px;
      li {
        font: 400 16px 'Microsoft YaHei';
        line-height: 26px;
      }
      .no_wrap {
        flex-wrap: nowrap;
        white-space: nowrap;
        // width: 400px;
      }
    }
  }
  .horizontal_line {
    width: 74%;
    height: 0px;
    border: 1px solid #ffffff;
    margin: 71px auto 16px;
  }
  .copyright {
    text-align: center;
    img {
      width: 15px;
      height: 15px;
    }
    .license {
      margin-right: 7px;
    }
    & > div:first-child {
      margin-bottom: 5px;
    }
    .record:hover {
      color: red;
    }
  }
}
</style>
